<template>
  <div class="wx-living-list">
      <div class="live-cont" v-if="liveList.length > 0">
            <div class="live-item" v-for="(item, index) in liveList" :key="index" @click="navToLiver(item.roomid)">
                <img class="live-item-bg" mode="aspectFill" :src="item.share_img"/>
                <div class="live-item-status d-flex" :class="[ item.live_status == 101 ? '':'bg1']">
                    <div class="live-item-status-img">
                        <img v-if="item.live_status == 101" src="https://img.wifenxiao.com/unisapp/common/live-on.gif"/>
                        <img v-else-if="item.live_status == 103" src="https://img.wifenxiao.com/unisapp/common/live-close.png" />
                        <img v-else-if="item.live_status == 102 || item.live_status == 107" src="https://img.wifenxiao.com/unisapp/common/live-wks.png"/>
                        <img v-else-if="item.live_status == 104 || item.live_status == 105 || item.live_status == 106" src="https://img.wifenxiao.com/unisapp/common/live-yc.png"/>
                    </div>
                    <div class=""> 
                        <span>{{item.live_status_string}}</span>
                    </div>
                </div>
                <div class="live-item-opt">
                    <div class="live-item-title">
                        <span>{{item.name}}</span>
                    </div>
                    <div class="live-item-msg d-flex">
                        <div class="live-item-user">
                            <span>主播：</span>
                            <span>{{item.anchor_name}}</span>
                        </div>
                        <div class="live-item-time" v-if="item.live_status != 107">
                            <span class="live-item-span">{{ item.live_status == 101 || item.live_status == 103 || item.live_status == 105 || item.live_status == 106 ? '结束时间':'开始时间' }} </span>
                            <span>{{ item.live_status == 101 || item.live_status == 103 || item.live_status == 105 || item.live_status == 106 ? item.end_time:item.start_time }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { wxBroadcastList } from '@/api/small/common'
export default Vue.extend({
    data() {
        return {
            isLoad: true,
            liveList: [],
            p: 1
        }
    },
    mounted() {
        window.addEventListener('wxload', query => {
            this.wxBroadcastListFun({ p: 1 })
        })

        window.addEventListener('wxunload', () => {
            this.p = 1
        })
        
        window.addEventListener('reachbottom', () => {
            if (this.isLoad) {
                const sendData = {}
                sendData.p = ++this.p
                 this.wxBroadcastListFun(sendData)
            }
        })
        
    },
    methods: {
        navToLiver(id) {
            wx.navigateTo({
                url: 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + id
            })
        },
        wxBroadcastListFun(sendData) {
            wxBroadcastList(sendData).then(res => {
                // console.log(res)
                if (res.status == 1) {
                    let listData = res.data.room
                    if (listData.length == 10) {
                        this.isLoad = true
                    } else {
                        this.isLoad = false
                    }
                    if (sendData.p == 1) {
                        this.liveList = listData
                    } else {
                        this.liveList = this.liveList.concat(listData)
                    }
                } else {
                    this.$Error(res.msg);
                }
            })
        }
    }
})
</script>

<style lang="scss">
    .wx-living-list {
        .d-flex {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
        }
        .live-cont {
            padding: 20px;
            width: 100%;
            box-sizing: border-box;

            .bg1 {
                background: linear-gradient(to top, #5f5254, #5f5254) !important;
            }
            .live-item {
                position: relative;
                height: 560px;
                border-radius: 20px;
                padding: 20px;
                width: 100%;
                box-sizing: border-box;
                margin-bottom: 20px;
                // background: url('http://mmbiz.qpic.cn/mmbiz_jpg/TEicmHaRwUuUzsjFBT02uRyZClxm7I8ggupll4vIGv4FJLRNn8tFd1tdn7ey3Hw2sWQONibULaZ4GuRp9Dbb33bQ/0') no-repeat;
                
                .live-item-bg {
                    position: absolute;
                    width: 100%;
                    height: 560px;
                    left: 0;
                    top: 0;
                    border-radius: 20rpx;
                }
                .live-item-status {
                    position: absolute;
                    top: 20px;
                    left: 20px;
                    background: linear-gradient(to top, #ff0032, #eb3807);
                    border-radius: 50px;
                    padding: 4px 20px;
                    color: #fff;
                    font-size: 22px;
                    .live-item-status-img img {
                        width: 30px;
                        vertical-align: -1px;
                        margin-right: 10px;
                    }
                }
                .live-item-opt {
                    width: 100%;
                    height: 240px;
                    z-index: 100;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    padding: 0 20px;
                    box-sizing: border-box;
                    background: url('https://img.wifenxiao.com/unisapp/common/live-mak.png') no-repeat;
                    background-size: 100% 240px;
                    .live-item-title {
                        width: 100%;
                        padding: 20px 0;
                        font-size: 28px;
                        color: #fff;
                        position: absolute;
                        bottom: 80px;
                    }
                    
                    .live-item-msg {
                        color: #fff;
                        position: absolute;
                        bottom: 40px;
                        font-size: 22px;
                        width: calc(100% - 40px);
                        .live-item-user {
                            max-width: 50%;
                            line-height: 30px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        .live-item-time {
                            background-color: #5f5254;
                            border-radius: 50px;
                            padding: 10px 20px;
                            .live-item-text {
                                background: linear-gradient(to top, #ff0032, #eb3807);
                                padding: 4px 16px;
                                border-radius: 50px;
                                display: inline-block;
                                margin-right: 10px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>